import TWEEN from '@tweenjs/tween.js'
import { ref, reactive, onUnmounted, onMounted } from '@vue/runtime-core'
import { getScreenSize, isMobile } from '../../utils'
import { game } from '../../Game'
const { width, height } = getScreenSize()
export const usePlaneMove = () => {
  const planeHalfWidth = 60
  const planeHeight = 80
  const planeHalfHeight = 40
  const planeInfo = reactive({
    x: width / 2 - planeHalfWidth,
    y: height - planeHeight,
    width: 120,
    height: 79
  })
  const speed = 10
  const {x, y} = useKeyboardMove({
    x: planeInfo.x,
    y: planeInfo.y,
    speed
  })
  planeInfo.x = x
  planeInfo.y = y
  const handleTouch = (e) => {
    if(!e.touches) return
    planeInfo.x = e.touches[0].pageX - planeHalfWidth
    planeInfo.y = e.touches[0].pageY - planeHalfHeight
  }
  const handleMove = (e) => {
    if(!e.touches) return
    planeInfo.x = e.touches[0].pageX - planeHalfWidth
    planeInfo.y = e.touches[0].pageY - planeHalfHeight
  }
  onMounted(() => {
    if(!isMobile) return
    document.addEventListener('touchstart', handleTouch)
    document.addEventListener('touchmove', handleMove)
  })
  onUnmounted(() => {
    if(!isMobile) return
    document.addEventListener('touchstart', handleTouch)
    document.addEventListener('touchmove', handleMove)
  })

  return {
    planeInfo
  }
}


const commandType = {
  upAndDown: "upAndDown",
  leftAndRight: "leftAndRight",
};

export const useKeyboardMove = ({ x, y, speed }) => {
  const moveX = ref(x);
  const moveY = ref(y);

  const moveCommands = [];

  const downCommand = {
    type: commandType.upAndDown,
    dir: 1,
    id: 1,
  };

  const upCommand = {
    type: commandType.upAndDown,
    dir: -1,
    id: 2,
  };

  const leftCommand = {
    type: commandType.leftAndRight,
    dir: -1,
    id: 3,
  };

  const rightCommand = {
    type: commandType.leftAndRight,
    dir: 1,
    id: 4,
  };

  const findUpAndDownCommand = () =>
    moveCommands.find((command) => command.type === commandType.upAndDown);

  const findLeftAndRightCommand = () =>
    moveCommands.find((command) => command.type === commandType.leftAndRight);

  const isExistCommand = (command) => {
    const id = command.id;
    const result = moveCommands.find((c) => c.id === id);
    if (result) return true;
    return false;
  };

  const removeCommand = (command) => {
    const id = command.id;
    const index = moveCommands.findIndex((c) => c.id === id);
    moveCommands.splice(index, 1);
  };
  // 缓动出场
  const tween = new TWEEN.Tween({
    x: moveX.value,
    y: height,
  })
    .to({ y: moveY.value }, 800)
    .start()
  tween.onUpdate((obj) => {
    moveX.value = obj.x
    moveY.value = obj.y
  });
  const planSlow = () => {
    TWEEN.update()
  }
  const handleTicker = () => {
    const upAndDownCommand = findUpAndDownCommand();
    if (upAndDownCommand) {
      moveY.value += speed * upAndDownCommand.dir;
    }

    const leftAndRightCommand = findLeftAndRightCommand();
    if (leftAndRightCommand) {
      moveX.value += speed * leftAndRightCommand.dir;
    }
    planSlow()
  };

  const commandMap = {
    ArrowLeft: leftCommand,
    ArrowRight: rightCommand,
    ArrowUp: upCommand,
    ArrowDown: downCommand,
  };

  const handleKeydown = (e) => {
    const command = commandMap[e.code];
    if (command && !isExistCommand(command)) {
      moveCommands.unshift(command);
    }
  };

  const handleKeyup = (e) => {
    const command = commandMap[e.code];
    if (command) {
      removeCommand(command);
    }
  };
  onMounted(() => {
    game.ticker.add(handleTicker)
    window.addEventListener("keydown", handleKeydown)
    window.addEventListener("keyup", handleKeyup)
  });

  onUnmounted(() => {
    game.ticker.remove(handleTicker)
    window.removeEventListener("keydown", handleKeydown)
    window.removeEventListener("keyup", handleKeyup)
  });

  return {
    x: moveX,
    y: moveY,
  };
}

